<template>
  <div>
    <el-dialog
      :model-value="visible"
      title="选择供应商(双击选择)"
      width="600"
      :close-on-click-modal="false"
      @close="cls"
    >
      <!-- 工具栏 -->
      <div style="margin-bottom: 10px">
        <el-input class="ipt" placeholder="请输入编号/名称/联系人/电话查询" />
        <el-button type="primary" size="small" @click="cls">查询结果</el-button>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        header-algin="center"
        stripe
        border
        @row-dblclick="choserrows"
        ref="tableDataRef"
      >
        <el-table-column prop="code" label="编号" width="100" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="user" label="联系人" width="100" />
        <el-table-column prop="phone" label="手机" width="100" />
      </el-table>
      <!-- 分页 -->
      <div style="margin-top: 10px">
        <el-pagination
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          small="small"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="SizeChange"
          @current-change="CurrentChange"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { querySupplier } from "@/api/platform/supplier.js";
//定义属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

//定义列表数据
const tableData = ref([]);

//分页数据
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tree = ref([]);

//定义事件
const emits = defineEmits(["close","choose"]);

//分页大小改变函数
let SizeChange = ps => {
  pageSize.value = ps;
  page.value = 1;
  init();
};

//页数改变函数
let CurrentChange = ch => {
  page.value = ch;
  init();
};

//双击选择供应商
function choserrows(row){
  //通过事件，将参数传递给父组件
  emits("choose", row)
cls()
}

//关闭
function cls() {
  emits("close");
}

//初始函数
async function init() {
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    eid: 1,
    mobile: "",
    name: "",
    status: 1,
    user: ""
  };
  let res = await querySupplier(data);
  if (res.code == 200) {
    tableData.value = res.data.list;
    total.value=res.data.total
  }
}

//生命周期函数
onMounted(() => {
  init();
});
</script>

<style scoped>
.ipt {
  width: 300px;
}
</style>
